<template>
    <div class="app-container">

        说明备注：<el-input v-model="code" autocomplete="off" placeholder="请输入说明备注" style="width: 15%;"></el-input>
        操作类型：<el-select v-model="value1" placeholder="操作类型">
            <el-option v-for="item in options1" :key="item.value1" :label="item.label1" :value="item.value1">
            </el-option>
        </el-select>
        所属店铺：<el-select v-model="value" placeholder="所属店铺">
            <el-option v-for="item in shops" :key="item.belongingStoreId" :label="item.name"
                :value="item.belongingStoreId">
            </el-option>
        </el-select>
        <el-button type="primary" @click="searchEmp()" icon="el-icon-search">搜索</el-button>
        <el-button type="info" @click="resetSearchForm('searchForm')" icon="el-icon-refresh">重置</el-button>
        <el-button type="success" @click="deleteBatch()" icon="el-icon-minus" style="float:right;">新增出库</el-button>
        <el-button type="success" @click="addopen()" icon="el-icon-plus" style="float:right;">新增入库</el-button>

        <!-- 页面展示的表单信息 -->
        <el-table :data="unitList" v-loading="listLoading" element-loading-text="Loading" border:true fit
            highlight-current-row stripe style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="100">
            </el-table-column>
            <el-table-column prop="stockControlId" label="库存管理ID" width="150">
            </el-table-column>
            <el-table-column prop="operateType" label="操作类型" width="150">
            </el-table-column>
            <el-table-column prop="belongingStoreId" label="所属商品店铺" width="180">
            </el-table-column>
            <el-table-column prop="remark" label="说明信息" width="150">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180">
            </el-table-column>
            <el-table-column prop="endTime" label="更新时间" width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-view"
                        @click="handleView(scope.$index, scope.row)">详情</el-button>
                    <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)"
                        icon="el-icon-edit">修改</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
                        icon="el-icon-delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <!-- 添加时候的表单弹框 -->
        <el-dialog title="添加库存管理信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="操作类型" :label-width="formLabelWidth">
                    <el-select v-model="form.operateType" placeholder="请选择操作类型">
                        <el-option label="入库" value="入库"></el-option>
                        <el-option label="出库" value="出库"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属店铺" :label-width="formLabelWidth">
                    <el-select v-model="form.belongingStoreId" placeholder="所属店铺">
                        <el-option v-for="item in shops" :key="item.belongingStoreId" :label="item.name"
                            :value="item.belongingStoreId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="说明备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.remark"></el-input>
                </el-form-item>
                <el-form-item label="创建时间" :label-width="formLabelWidth">
                    <el-date-picker v-model="form.createTime" type="datetime" placeholder="选择日期时间"
                        value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addStock()">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改时候的表单弹框 -->
        <el-dialog title="修改库存管理信息" :visible.sync="dialogUpdateVisible">
            <el-form :model="form">
                <el-form-item label="操作类型" :label-width="formLabelWidth">
                    <el-select v-model="form.operateType" placeholder="请选择操作类型">
                        <el-option label="入库" value="入库"></el-option>
                        <el-option label="出库" value="出库"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属店铺" :label-width="formLabelWidth">
                    <el-select v-model="form.belongingStoreId" placeholder="所属店铺">
                        <el-option v-for="item in shops" :key="item.belongingStoreId" :label="item.name"
                            :value="item.belongingStoreId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="说明备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.remark"></el-input>
                </el-form-item>
                <el-form-item label="创建时间" :label-width="formLabelWidth">
                    <el-date-picker v-model="form.createTime" type="datetime" placeholder="选择日期时间"
                        value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdateVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateStock()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 导入api/clue.js中定义接口
import { stockControlPage, addStockControl, findStockControlById, updateStockControl, delById, delBatch } from "@/api/stockControl";
import { getShops } from "@/api/shopList";

export default {
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: "success",
                draft: "gray",
                deleted: "danger",
            };
            return statusMap[status];
        },
    },
    data() {
        return {
            unitList: [],
            shops: [],
            listLoading: true,
            dialogFormVisible: false,
            dialogUpdateVisible: false,
            form: {
                stockControlId: "",
                operateType: "",
                belongingStoreId: "",
                createTime: "",
                endTime: "",
                remark: "",
            },
            formLabelWidth: "120px",
            currentPage: 1,
            total: 0,
            pageSize: 10,
            ids: [],
            options1: [
                { value1: "入库", label1: "入库" },
                { value1: "出库", label1: "出库" },
            ],
            value: '',
            value1: '',
            code: '',
        };
    },
    created() {
        this.fetchData();
    },
    methods: {
        fetchData(code, value, value1) {
            this.listLoading = true;
            console.log("code,value,value1", code, value, value1)
            stockControlPage({ pageNum: this.currentPage, pageSize: this.pageSize, remark: code, belongingStoreId: value, operateType: value1 }).then((response) => {
                console.log(response)
                this.unitList = response.data.list;
                this.total = response.data.total
                this.listLoading = false;
            });

        },
        searchEmp() {
            this.fetchData(this.code, this.value, this.value1);
        },
        //添加市场活动显现弹框并添加数据
        addopen() {
            this.form = {},
                this.dialogFormVisible = true;
        },
        addStock() {
            addStockControl(this.form).then((response) => {
                if (response.code == 500) {
                    this.$message({
                        type: "error",
                        message: response.msg,
                        duration: 1000
                    });
                }
                if (response.code == 200) {
                    this.$message({
                        type: "success",
                        message: "添加成功!",
                    });
                    this.dialogFormVisible = false;
                    this.fetchData();
                }
            });
        },
        //在查询后重置
        resetSearchForm() {
            this.form = "";
            this.currentPage = 1;
            this.value = '';
            this.value1 = '';
            this.code = '';
            this.fetchData();
        },
        // 每页显示的记录数发生变化触发的操作
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.fetchData()

        },
        // 当前页发生变化触发的操作
        handleCurrentChange(val) {
            this.currentPage = val
            this.fetchData(this.code, this.value, this.value1)
        },
        handleSelectionChange(val) {
            this.ids = [];
            for (var i = 0; i < val.length; i++) {
                this.ids.push(val[i].stockControlId)
            }
            console.log(this.ids)
        },
        //修改市场活动弹框显现并修改数据
        handleEdit(index, row) {
            findStockControlById(row.stockControlId).then((response) => {
                this.form = response.data;//将查询出来的数据 赋值给表单
                // this.form.belongingStoreId = +this.form.belongingStoreId
                this.dialogUpdateVisible = true;
            });
        },
        updateStock() {
            console.log("修改数据", this.form)
            updateStockControl(this.form).then((response) => {
                console.log("修改******", this.response)
                if (response.code == 200) {
                    this.dialogUpdateVisible = false;
                    this.$message({
                        type: "success",
                        message: "修改成功!",

                    });
                    this.fetchData();
                }
            });
        },
        //删除数据
        handleDelete(index, row) {
            // console.log(index, row);
            this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    delById(row.stockControlId).then((response) => {
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.currentPage = 1,
                            this.fetchData();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        //批量删除数据，转化客户
        deleteBatch() {
            if (this.ids.length == 0) {
                alert('请选择至少一条数据');
                return;
            }
            delBatch(this.ids.join(",")).then(response => {
                console.log("sdadadadadadad===>>", this.ids)
                if (response.code == 200) {
                    this.$message({
                        message: "批量删除成功",
                        type: "success",
                        duration: 1000,

                    })
                    this.currentPage = 1,
                    this.fetchData();;
                }

            })
        },
        handleView(index, row) {
            console.log(index, row);
            this.$router.push({ path: '/goods/message', query: { id: row.stockControlId } });
        },
        getShop() {
            getShops().then((response) => {
                this.shops = response.data;
            });
        },
    },
    // 生命周期钩子函数(vue对象创建完,自动调用该方法)
    created() {
        this.fetchData();
        this.getShop();
    },
}
</script>